<!Doctype html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<style>
		#ball {margin-left:0;width:100px;height:100px;border-radius:50%;background:rgba(0,0,255,.4);}
		#ball1{margin-left:0;width:100px;height:100px;border-radius:50%;background:rgba(255,0,0,.4);}
		.container{width:;height:100px;}
	</style>
</head>
<body>
	<div class="container"><div id="ball"></div></div>
	<div class="container"><div id="ball1"></div></div>
	<input type="button" value="开始" id="btn">
	<input type="button" value="暂停" id="btn1">
	<input type="button" value="开始2" id="btn2">
	<input type="button" value="暂停2" id="btn21">
	<script>
		var btn = document.getElementById('btn');
		var btn1 = document.getElementById('btn1');
		var btn2 = document.getElementById('btn2');
		var btn21 = document.getElementById('btn21');
		var move = doMove('ball');
		btn.onclick = move.play;
		btn1.onclick = move.pause;
		var move2 = doMove('ball1');
		btn2.onclick = move2.play;
		btn21.onclick = move2.pause;
		function doMove (id) {
			var step = 1;
			var timer;
			function move(){
				clearInterval(timer);
				function AccelerateBall(){
					var ball = document.getElementById(id);
					var ballMarginLeft = parseInt(window.getComputedStyle(ball).marginLeft);
					var ballNewMarginLeft = 0;
					if(ballMarginLeft<=200){
						step = step+0.1;
					}else if(ballMarginLeft>=400){
						step = step-0.1;
					}
					ballNewMarginLeft = ballMarginLeft + step + 'px';
					ball.style.marginLeft = ballNewMarginLeft;
				}
				timer = setInterval(AccelerateBall,20);
			}
			function pause(){
				clearInterval(timer);
			}
			var o ={
				play: move,
				pause: pause
			}
			return o;
		}
	</script>
</body>
</html>





